<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华南农业大学实验室报修系统</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{~/mobile/common.css}" type="text/css">
</head>
<body>
    <div>
        <p style="display:inline-block">您好，主任${session.cWechatUser.name!}</p>
        <a style="display:inline-block;" href="/mobile/logout.html" class="weui-btn weui-btn_mini weui-btn_warn">退出登录</a>
    </div>
    <div class="weui-tab">
        <div class="weui-navbar">
            <a class="weui-navbar__item weui-bar__item--on" href="#tab1" onclick="getData('all', $('#area1'))">
                全部
            </a>
            <a class="weui-navbar__item" href="#tab2" onclick="getData('candidate', $('#area2'))">
                待接管
            </a>
            <a class="weui-navbar__item" href="#tab3" onclick="getData('notEnd', $('#area3'))">
                未完成
            </a>
            <a class="weui-navbar__item" href="#tab4" onclick="getData('end', $('#area4'))">
                已完成
            </a>
        </div>
        <div class="weui-tab__bd">
            <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                <div class="weui-cell after">
                    <div class="weui-cell__bd">
                        <label class="weui-label">开始时间从</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" value="2018/01/01" data-toggle='date' class="weui-input afterCalendar"  onchange="getData('all', $('#area1'))" />
                    </div>
                </div>

                <div class="weui-cell before">
                    <div class="weui-cell__bd">
                        <label class="weui-label">到</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" value="2022/01/01"  data-toggle='date' class="weui-input beforeCalendar" onchange="getData('all', $('#area1'))" />
                    </div>
                </div>
                <div id="area1">

                </div>
                <!--

                <div class="weui-infinite-scroll">
                    <div class="infinite-preloader"></div>
                    正在加载...
                </div>
                -->
            </div>

            <div id="tab2" class="weui-tab__bd-item">
                <h1>待接管记录</h1>
                <div id="area2">

                </div>
            </div>

            <div id="tab3" class="weui-tab__bd-item">
                <div class="weui-cell after">
                    <div class="weui-cell__bd">
                        <label class="weui-label">开始时间从</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" value="2018/01/01" data-toggle='date' class="weui-input afterCalendar"  onchange="getData('notEnd', $('#area3'))" />
                    </div>
                </div>

                <div class="weui-cell before">
                    <div class="weui-cell__bd">
                        <label class="weui-label">到</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" value="2022/01/01"  data-toggle='date' class="weui-input beforeCalendar" onchange="getData('notEnd', $('#area3'))" />
                    </div>
                </div>
                <div id="area3">

                </div>
            </div>
            <div id="tab4" class="weui-tab__bd-item">
                <div class="weui-cell after">
                    <div class="weui-cell__bd">
                        <label class="weui-label">开始时间从</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" value="2018/01/01" data-toggle='date' class="weui-input afterCalendar"  onchange="getData('end', $('#area4'))" />
                    </div>
                </div>

                <div class="weui-cell before">
                    <div class="weui-cell__bd">
                        <label class="weui-label">到</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" value="2022/01/01"  data-toggle='date' class="weui-input beforeCalendar" onchange="getData('end', $('#area4'))" />
                    </div>
                </div>
                <div id="area4">

                </div>
            </div>
        </div>
    </div>
<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script type="text/javascript" src="/static/js/zepto.min.js"></script>
<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
<script th:src="@{~/mobile/start/HomePage.js}"></script>
@@ include("../../pc/upload.jsp"){} $$
<script type="text/javascript">

    $(document).ready(function(){
        //页面加载时，'全部'tab接收数据并显示。
        getData('all', $('#area1'));
        $(".beforeCalendar").calendar();
        $(".afterCalendar").calendar();
    });

    //获取最新数据，并清空历史内容，将新数据追加
    function getData(type, area){
        area.empty();
        var postURL = "", postType;
        if(type == "candidate"){
            postURL = "/mobile/repair/candidate";
            postType = null;
        }
        else{
            var reg = new RegExp("/","g");
            var after = area.siblings(".after").find(".afterCalendar").val().replace(reg,'-'),
                before = area.siblings(".before").find(".beforeCalendar").val().replace(reg,'-');
            postURL = "/mobile/repair/history";
            postType = {after:after, before:before, type:type};
        }
        $.post(postURL, postType, function(result){
            if(result.statusCode == 'NO'){
                if(result.data.length == 0){
                    area.append("暂无数据");
                }
                else{
                    $.each(result.data, function (i, proc) {
                        area.append(getElement(proc));
                    });
                }
            }else{
                area.append("数据接收失败！");
            }
        });
    }

    function getElement(proc) {
        var assignName = (proc.assignee == "")?'无':proc.assignee,
            endTime = (proc.endTime == null)?'未结束':proc.endTime;
        var str =
            '<div class="weui-form-preview">' +
            '<div class="weui-form-preview__hd">' +
            '<label class="weui-form-preview__label">接管人</label>' +
            '<em class="weui-form-preview__value">' +
            assignName+ '</em>' +
            '</div>' +
            '<div class="weui-form-preview__bd">' +
            '<div class="weui-form-preview__item">' +
            '<label class="weui-form-preview__label">流水单号</label>' +
            '<span class="weui-form-preview__value">' + proc.id + '</span>' +
            '</div>' +
            '<div class="weui-form-preview__item">' +
            '<label class="weui-form-preview__label">起始时间</label>' +
            '<span class="weui-form-preview__value">' + proc.startTime + '</span>' +
            '</div>' +
            '<div class="weui-form-preview__item">' +
            '<label class="weui-form-preview__label">结束时间</label>' +
            '<span class="weui-form-preview__value">' + endTime + '</span>' +
            '</div>' +
            '</div>' +
            '<div class="weui-form-preview__ft">' +
            '<a type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="/mobile/repair/proc/' + proc.vars.recordId + '">查看详情</a>' +
            '</div>' +
            '</div>';
        return str;
    }

    // var loading = false;  //状态标记
    // $(document.body).infinite().on("infinite", function() {
    //     if(loading) return;
    //     loading = true;
    //     setTimeout(function() {
    //         $("#tab1").append("<p> 我是新加载的内容 </p>");
    //         loading = false;
    //     }, 1500);   //模拟延迟
    // });

</script>
</body>
</html>